<template>
	<div>

		<div class="content">

			<div class="header">
				<!-- 修改表单区域 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item>
						<el-input v-model="formInline.user" placeholder="所有单耗/充值账号/卡密" clearable />
					</el-form-item>
					<el-form-item label="订单状态" style="width: 200px;">
						<el-select v-model="value" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="创建时间">
						<el-date-picker v-model="value1" type="datetimerange" range-separator="To"
							start-placeholder="Start date" end-placeholder="End date" />
					</el-form-item>
					<el-form-item label="用户ID">
						<el-input v-model="formInline.user" placeholder="请输入用户ID" clearable />
					</el-form-item>
					<el-form-item label="销售价">
						<el-input v-model="formInline.user" placeholder="请输入销售价" clearable />
					</el-form-item>
					<el-form-item label="成本价">
						<el-input v-model="formInline.user" placeholder="请输入成本价" clearable />
					</el-form-item>
					<el-form-item label="渠道">
						<el-select v-model="value" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="渠道商品">
						<el-input v-model="formInline.user" placeholder="请输入渠道商品" clearable />
					</el-form-item>
					<el-form-item label="商品类型">
						<el-select v-model="value" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="完成时间">
						<el-date-picker v-model="value1" type="datetimerange" range-separator="To"
							start-placeholder="Start date" end-placeholder="End date" />
					</el-form-item>
					<el-form-item label="支付方式">
						<el-select v-model="value" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="下单来源">
						<el-select v-model="value" placeholder="请选择" style="width: 200px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitSee">查询</el-button>
						<el-button type="primary" plain @click="onSubmit">重置</el-button>
					</el-form-item>
				</el-form>
				<div class="headers">
					<div class="header-name" v-for="(item,index) in tabDate" :key="index"
						:class="{'names':names ==index}" @click="btnName(index)">
						{{item.name}}
					</div>

				</div>
			</div>
			<div class="area">
				<div style="border-bottom: 1px solid #3333;width: 97%;margin: 0 auto;">
					<div class="header-area">
						<div class="tab-name" v-for="(item,index) in tabList" :key="index"
							:class="{'tabname':tabname==index}" @click="btnTable(index)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="tab-header" style="margin-top: 20px;">
					<div class="tabs">
						<el-button type="danger" @click="addOpen">批量删除(0)</el-button>
					</div>
					<div class="tabs">
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-button type="primary">处理订单(0)</el-button>
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>

									<el-dropdown-item disabled>批量处理</el-dropdown-item>
									<el-dropdown-item disabled>批量撤单</el-dropdown-item>

								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="tabs">
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-button type="primary">批量补单(0)</el-button>
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>

									<el-dropdown-item disabled>渠道订单</el-dropdown-item>
									<el-dropdown-item disabled>支付订单</el-dropdown-item>

								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="tabs">
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-button type="primary">批量同步回调(0)</el-button>
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>

									<el-dropdown-item disabled>同步渠道订单</el-dropdown-item>
									<el-dropdown-item disabled>回调AP订单</el-dropdown-item>

								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="tabs">
						<el-button type="primary">导出订单</el-button>
					</div>
					<div class="tabs">
						<el-button type="primary">复制下单参数</el-button>
					</div>
				</div>

				<div class="table-area">
					<el-table border :data="dataList" stripe style="width: 100%"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" />
						<el-table-column prop="status" align="center" label="订单状态" #default="scope" width="100">
							<div class="table-name" v-if="scope.row.status =='交易成功'">{{scope.row.status}}</div>
							<div class="table-name" style="background-color: red;" v-if="scope.row.status =='未付款'">
								{{scope.row.status}}</div>
							<div class="table-name" style="background-color: #303133;" v-if="scope.row.status =='交易失败'">
								{{scope.row.status}}</div>
						</el-table-column>
						<el-table-column prop="ordersn" align="center" label="订单号" #default="scope" width="260">
							<div style="color: #1890ff;">{{scope.row.ordersn}}</div>
						</el-table-column>
						<el-table-column prop="goods_name" align="center" label="商品名称" #default="scope" width="360">
							<div style="display: flex;font-size: 12px;">
								<div>
									<img class="imgs" :src="scope.row.goods_attment_face_id" alt="">
								</div>
								<div style="margin-left: 6px;">
									<div style="color: #1890ff;display: flex;">
										{{scope.row.goods_name}}
									</div>
									<div style="display: flex;">
										<div class="kami">{{scope.row.goods_type}}</div>

										<div class="ordername" v-if="scope.row._status_text == '未支付'">
											{{scope.row._status_text}}</div>
										<div class="ordername" style="color: red;border: 1px solid red;"
											v-if="scope.row._status_text == '取消交易'">{{scope.row._status_text}}</div>
										<div class="ordername" style="color: #13ce66;border: 1px solid #13ce66;"
											v-if="scope.row._status_text == '交易成功'">{{scope.row._status_text}}</div>
										<div class="unbers">数量x{{scope.row.quantity}}</div>
									</div>
								</div>
							</div>
						</el-table-column>
						<!-- 	<el-table-column prop="name3" align="center" label="下单参数" width="100" /> -->
						<el-table-column prop="uid" align="center" label="下单用户" width="100" #default="scope">
							<div style="color: #46a6ff;">{{scope.row.uid}}</div>
						</el-table-column>
						<el-table-column label="下单时间" align="center" #default="scope" width="220">
							<div style="display: flex;">
								创：{{scope.row._create_time}}
							</div>


						</el-table-column>
						<el-table-column label="处理时间" align="center" #default="scope" width="220">


							<div style="display: flex;">
								更：{{scope.row.update_time}}
							</div>
							<div style="display: flex;">
								耗：{{scope.row.finish_time}}
							</div>
						</el-table-column>
						<el-table-column align="center" prop="total_price" label="销售价" />
						<el-table-column align="center" prop="purchase_price" label="成本价" />
						<el-table-column align="center" prop="net_profit_price" label="利润" />
						<el-table-column align="center" prop="net_profit_price" label="真实成本利润" width="180" />

						<el-table-column align="center" fixed="right" label="操作" min-width="180">
							<template #default="scope">
								<div :style="isMobile ? 'display: flex; flex-direction: column;' : ''">

									<el-button type="primary" plain size="small" @click="btnSee(scope.row)"
										style="margin-bottom:5px">查看详情</el-button>
									<el-button type="danger" plain size="small"
										@click="handleDelete(scope.row.id)">删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="footers">
					<div class="footerss">
						<div style="flex: 1;">
							<div style="margin-top: 12px;">本页统计数据</div>
							<div style="margin-top: 6px;">合计：销售价：<span style="color: red;">30537</span>元 利润:
								<span style="color: red;">10026.02</span>元 真实成本:
								<span style="color: red;">10350.52</span> 元 真实成本利润 <span style="color: red;">
									107.48</span>元
							</div>
						</div>
						<div style="flex: 1;">
							<div style="margin-top: 12px;">全部统计数据</div>
							<div style="margin-top: 6px;">合计：销售价：<span style="color: red;">35505.6600元</span>元 利润:
								<span style="color: red;">23069.92000</span>元 真实成本:
								<span style="color: red;">11326.6500</span> 元 真实成本利润 <span style="color: red;">
									11902.1236</span>元
							</div>
						</div>
					</div>
				</div>
				<!-- 新增分页组件 -->
				<div class="pagination-container">
					<el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
						:page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"
						@size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" />
				</div>

			</div>

		</div>

		<!-- 详情 -->
		<el-drawer v-model="drawer" :size="'70vw'" :with-header="false">

			<div class="contents-title">
				<div>订单信息</div>
				<div><el-button type="primary">订单处理</el-button></div>
			</div>
			<div class="img-content">
				<div class="img-left">
					<div>
						<img class="imgsleft" :src="orderObj.goods_attment_face_id" alt="">
					</div>
				</div>
				<div class="right-name">
					<div>【{{orderObj.goods_name}}】{{orderObj.id}}</div>
					<div style="margin-top: 16px;margin-left:9px;">订单编号： {{orderObj.ordersn}}</div>
				</div>

			</div>
			<div class="types">
				<div class="type-name">
					<div>订单状态</div>
					<div class="quxiao">{{orderObj.status}}</div>
				</div>
				<div class="type-name">
					<div>订单总价</div>
					<div>￥{{orderObj.total_price}}</div>
				</div>
				<div class="type-name">
					<div>实际支付</div>
					<div>￥{{orderotherinfo.total_price}}</div>
				</div>
				<div class="type-name">
					<div>下单来源</div>
					<div>{{orderotherinfo.payment_gateway || ''}}</div>
				</div>
			</div>
			<div class="areas">
				<div class="areas-header">
					<div class="area-tab">
						<div class="area-name" v-for="(item,index) in tabsList" :key="index"
							:class="{'activeTab':activeTab ==index}" @click=btnActive(index)>
							{{item.name}}
						</div>

					</div>
					<!-- 订单详情 -->
					<div v-show="activeTab ==0">
						<div class="order-detail">
							<div class="order-information">支付信息</div>
							<div style="margin-top: 12px;">
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">支付单号：{{orderotherinfo.order_sn}}</div>

									<div class="orders-names">支付金额：￥{{orderotherinfo.total_price}}</div>
								</div>
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">支付类型：{{orderotherinfo.payment_gateway}}</div>
									<div class="orders-names" style="width: 360px;">手续费：{{orderotherinfo.service_price}}</div>
									<div class="orders-names">支付状态：{{orderotherinfo.status}}</div>
								</div>
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">创建时间:{{orderotherinfo.create_time}}</div>
									<div class="orders-names" style="width: 360px;">支付时间:{{orderotherinfo.payment_time}}</div>

								</div>
							</div>
						</div>
						<div class="order-detail">
							<div class="order-information">购买信息</div>
							<div style="margin-top: 12px;">
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">用户UID号：{{orderObj.price_set_content}}</div>
									<div class="orders-names" style="width: 360px;">用户名称：{{orderObj.name}}</div>
									<div class="orders-names" style="width: 360px;">商品ID：￥{{orderObj.goods_id}}</div>
								</div>
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">下单数量：{{orderObj.quantity}}</div>
									<div class="orders-names" style="width: 360px;">商品单价：{{orderObj.cost_value}}</div>
									<div class="orders-names" style="width: 360px;">购买域名：￥{{orderotherinfo.host}}</div>
								</div>
								<div class="order-names">
									<div class="orders-names" style="width: 360px;">购买IP：{{orderObj.ip}}</div>
									<div class="orders-names" style="width: 360px;">购买地址：{{orderObj.province}}省{{orderObj.city}}市</div>
										<div class="orders-names" style="width: 360px;">订单备注：{{orderObj.mark}}</div>
								</div>
							</div>
						</div>

						<div class="order-detail">
							<div class="order-information">订单信息</div>
							<div style="margin-top: 12px;">
								<div class="order-names">
									<div class="orders-names" style="width: 358px;">订单总价：{{orderObj.total_price}}</div>
									<div class="orders-names" style="width: 358px;">订单成本：{{orderObj.purchase_price}}</div>
									<!-- <div class="orders-names">订单佣金：￥{{orderObj.net_profit_price}}</div> -->
								</div>
								<div class="order-names">
									
									<div class="orders-names" style="width: 358px;">创建时间：{{orderObj.create_time}}</div>
									<div class="orders-names" style="width: 358px;">处理时间：{{orderObj.update_time}}</div>
									<div class="orders-names" style="width: 358px;">平台利润：{{orderObj.net_profit_price}}</div>
								</div>
								
							</div>
						</div>
						<div class="order-detail">
							<div class="order-information">{{orderObj.goods_type}}</div>
							<div style="margin-top: 12px;">
								<div class="order-names">
									<div class="orders-names" style="width: 358px;">通知邮箱：Z0614282329592939675648</div>
									
								</div>
								
								
							</div>
						</div>
					</div>
					<!-- 订单处理 -->
					<div v-show="activeTab ==1">
						222
					</div>
					<!-- 商品信息 -->
					<div v-show="activeTab ==2">
						333
					</div>
					<!-- 订单日志 -->
					<div v-show="activeTab ==3">
						44
					</div>
					<!-- 订单佣金 -->
					<div v-show="activeTab ==4">
						55
					</div>
					<!-- 佣金明细 -->
					<div v-show="activeTab ==5">
						666
					</div>
					<!-- 资金明细 -->
					<div v-show="activeTab ==6">
						777
					</div>

				</div>
			</div>
		</el-drawer>

	</div>
</template>

<script lang="ts" setup>
	import { getOrderList, getOrderDetail } from '~/base/api/order/orderList.ts'

	import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
	import axios from 'axios';
	import { Loading } from '@element-plus/icons-vue'
	import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
	const names = ref(0)
	const drawer = ref(false)
	const tabname = ref(0)
	const activeTab = ref(0)
	const tabsList = ref([
		{
			name: '订单详情'
		},
		{
			name: '订单处理'
		},
		{
			name: '商品信息'
		},
		{
			name: '订单日志'
		},
		{
			name: '订单佣金'
		},
		{
			name: '佣金明细'
		},
		{
			name: '资金明细'
		},
	])
	const tableData = ref([
		{
			name: '取消支付',
			name1: "w2323232323",
			name2: {
				name: '测试卡密',
				number: 10000,
				type: '未支付'
			},
			name3: "12121212@qq.com",
			name4: "[12121212] 123",
			name5: {
				name: '创',
				time: '2025-12-12 01:12:12',
				name2: '支',
				time2: '2025-12-12 12:12:12'
			},
			name6: {
				name: '更',
				time: '2025-12-12 01:12:12',
				name2: '耗',
				time2: '2025-12-12 12:12:12'
			},
			name7: "2002.5",
			name8: "2565.2",
			name9: "0.00",
			name10: "1.00",
			name11: "0.00",
		}
	])
	const orderObj = ref({})
	const orderotherinfo=ref({})
	const tabList = ref([
		{
			name: '所有订单(2622)'
		},
		// {
		// 	name: '平台订单(2622)'
		// },

		// {
		// 	name: '兑换订单(17)'
		// },
		// {
		// 	name: '平台订单(2622)'
		// },
		// {
		// 	name: '快速充值订单(0)'
		// }
	])
	const checkIsMobile = () => {
		isMobile.value = window.innerWidth <= 768
	}
	//详情tab切换
	function btnActive(e) {
		console.log('eeee', e)
		activeTab.value = e
	}
	//查看详情
	function btnSee(e) {
		drawer.value = true
		getOrderDetail({ id: e.id }).then((res) => {
			orderObj.value = res.data.order
			orderotherinfo.value=res.data.order_other_info
			if(orderObj.value.goods_type ==1){
				orderObj.value.goods_type='卡密商品'
			}else if(orderObj.value.goods_type ==2){
				orderObj.value.goods_type='充值商品'
			}else if(orderObj.value.goods_type ==3){
				orderObj.value.goods_type='实物商品'
			}
			if(orderObj.value.status ==1){
				orderObj.value.status='正在处理'
			}else if(orderObj.value.status ==3){
					orderObj.value.status='交易成功'
			}else if(orderObj.value.status ==4){
					orderObj.value.status='交易失败'
			}else{
				orderObj.value.status='已成功退款'
			}
		})

	}
	const value = ref("")
	const tabDate = ref([
		{
			name: '全部订单'
		},
		{
			name: '等待处理'
		},
		{
			name: '正在处理'
		},
		{
			name: '交易处理'
		},
		{
			name: '已经退款'
		},
		{
			name: '部分退款'
		},
		{
			name: '取消支付'
		},
		{
			name: '等待支付'
		},

	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const activeName = ref('first')
	const dataList = ref([])
	// 添加响应式检测
	const isMobile = ref(false)
	const isBd = ref(1)
	const nameShow = ref(false)
	const passwords = ref("")
	const paypassword = ref("")
	const payuserid = ref("")
	const usernametitle = ref("")
	const channelTreeData = ref([])   // 渠道树形结构数据
	const currentPage = ref(1) // 当前页码
	const pageSize = ref(10) // 每页显示数量
	const total = ref(0) // 总记录数
	const keyword = ref("")
	const keytype = ref("")

	const formInline = reactive({
		user: '',
		region: '',
		date: '',
	})
	//点击tab切换
	function btnName(e) {
		names.value = e
	}
	//点击电锯切换
	function btnTable(e) {
		tabname.value = e
	}
	function handleUpdateNode({ id, property, value }) {
		// 更新树数据中对应节点的属性
		const updateNode = (nodes) => {
			return nodes.map(node => {
				if (node.id === id) {
					return { ...node, [property]: value };
				}
				if (node.list) {
					return { ...node, list: updateNode(node.list) };
				}
				return node;
			});
		};
		channelTreeData.value = updateNode(channelTreeData.value);
	}


	// 删除方法
	const handleDelete = (id : string) => {
		ElMessageBox.confirm('确定要删除这条记录吗?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(() => {
				// 这里调用删除API
				categoryDel({ id: id }).then(() => {
					ElMessage.success('删除成功');
					//fetchData(); // 刷新列表
				});

			})
			.catch(() => {
				ElMessage.info('已取消删除');
			});
	};



	const submit = () => {

		AddDock(addform).then(() => {
			dialogVisible.value = false
			handleQuery() // 提交后刷新列表
		})
	}
	// 查询处理
	const handleQuery = () => {
		currentPage.value = 1 // 重置为第一页
		getSetdocking()
	}

	// 重置查询条件
	const handleReset = () => {
		formInline.user = ''
		handleQuery()
	}
	// 分页尺寸变化
	const handlePageSizeChange = (size : number) => {
		pageSize.value = size
	  getSetdocking()
	}

	// 页码变化
	const handleCurrentPageChange = (page : number) => {
		currentPage.value = page
		getSetdocking()
	}
	onMounted(() => {
		getSetdocking()
	})
	//查询
	function submitSee() {
		console.log('erer')
		getSetdocking()
	}

	//列表
	function getSetdocking() {
		// 显示 loading
		const loadingInstance = ElLoading.service({
			target: '.el-dialog', // 针对对话框区域
			lock: true,
			text: '正在加载数据中...',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		let parm = {
			page: currentPage.value,
			limit: pageSize.value,
			_key_word: keyword.value,
			_key_type: keytype.value
		}
		getOrderList(parm).then((res) => {
			if (res.code == 200) {

				dataList.value = res.data.data
				 total.value=Number(res.data.count)
				
				for (let item of dataList.value) {
					if (item.goods_type == '1') {
						item.goods_type = '卡密商品'
					} else if (item.goods_type == '2') {
						item.goods_type = '充值商品'
					}
					else if (item.goods_type == '3') {
						item.goods_type = '实物商品'
					} else if (item.goods_type == '4') {
						item.goods_type = '网课'
					}
					if (item.status == 0) {
						item.status = '未付款'
					} else if (item.status == 1) {
						item.status = '正在处理'
					} else if (item.status == 3) {
						item.status = '交易成功'
					} else if (item.status == 4) {
						item.status = '交易失败'
					} else if (item.status == 5) {
						item.status = '成功已退款'
					}
				}
			}
		}).finally(() => {
			// 数据加载完成后关闭 loading
			loadingInstance.close();
		});
	}
</script>

<style scoped>
	.orders-names {}

	.order-names {
		display: flex;
		margin-top: 15px;
	}

	.order-information {
		font-size: 16px;
	}

	.order-detail {

		height: 164px;
		border-bottom: 1px solid #3333;
		margin-top: 30px;
		font-size: 13px;
	}

	.activeTab {
		border-bottom: 1px solid #1890ff !important;
		color: #1890ff !important;
	}

	.area-tab {
		display: flex;
		position: relative;
		left: -28px;
	}

	.area-name {
		margin-left: 30px;
		cursor: pointer;
		height: 31px;
	}

	.areas-header {

		height: 32px;
		border-bottom: 1px solid #3333;
		width: 100%;
	}

	.areas {
		width: 98%;
		margin: 0 auto;
		height: 500px;
		overflow: auto;
		margin-top: 40px;
	}

	.quxiao {
		padding: 1px 7px 1px 7px;
		color: white;
		background-color: rgba(0, 0, 0, .65);
		font-size: 12px;
	}

	.type-name {
		margin-left: 150px;
	}

	.types {
		display: flex;
		margin-top: 30px;
		position: relative;
		left: -150px;
		font-size: 13px;
	}

	.imgsleft {
		width: 70px;
		height: 80px;

	}

	.img-left {
		width: 9%;
	}

	.img-content {
		margin-top: 12px;
		display: flex;
	}

	.contents-title {
		display: flex;
		margin-top: 14vh;
		justify-content: space-between;
	}

	.unbers {
		color: #1890ff;
		background-color: #e8f4ff;
		border-color: #d1e9ff;
		padding: 1px 7px 1px 7px;
		margin-left: 12px;
	}

	.ordername {
		color: #333;
		border: 1px solid #3333;
		border-color: #333;
		padding: 1px 9px 1px 9px;

		margin-left: 12px;
	}

	.kami {
		color: #13ce66;
		background-color: #e7faf0;
		border-color: #d0f5e0;
		padding: 1px 7px 1px 7px;

	}

	.imgs {
		width: 60px;
		height: 60px;

	}

	.table-name {
		background-color: #13ce66;
		color: white;
		padding: 3px 5px 3px 9px;
		cursor: pointer;
	}

	.table-name2 {
		border-color: rgba(0, 0, 0, .65);
		color: white;
		padding: 3px 5px 3px 9px;
		cursor: pointer;
	}

	.footerss {
		display: flex;
		width: 96%;
		margin: 0 auto;
		font-size: 13px;
	}

	.footers {
		width: 98%;
		border: 1px solid #3333;
		margin: 0 auto;
		height: 100px;
		margin-top: 25px;
	}

	.tabname {
		color: #409EFF !important;
		border-bottom: 2px solid #409EFF !important;
	}

	.tab-name {
		margin-left: 18px;
		cursor: pointer;
		height: 30px;
	}

	.header-area {
		display: flex;
		position: relative;
		left: -18px;
		top: 1px
	}

	.names {
		background: #409EFF !important;
		color: white !important;
		border: none !important;
	}

	.header-name {
		border-radius: 20px;
		padding: 3px 16px 3px 16px;
		border: 1px solid #9999;
		margin-left: 12px;
		font-size: 13px;
		cursor: pointer;
	}

	.headers {
		display: flex;
		padding-bottom: 12px;
	}

	.m-2 {
		width: 160px;

	}

	.pagination-container {
		display: flex;
		justify-content: center;
		margin-top: 24px
	}

	.configurations {
		margin-top: 12px;
	}

	.configuration-area {}

	.dialog-footer {
		margin: 0 auto;
		margin-top: 30px;
		text-align: center;
	}

	.orders-name {
		margin-top: 12px;
	}

	.orders {
		margin-left: 12px;
	}

	.order-area {
		width: 98%;
		padding-bottom: 12px;
		border: 1px solid #409eff;
		background-color: #e8f4ff;
	}

	.tabs-area {
		margin-top: 12px;
	}

	.diolog-content {}

	.shuaxin {
		font-size: 12px;
		color: #409eff;
		padding-right: 2px;
		cursor: pointer;
	}

	.table-area {
		width: 98%;
		margin: 0 auto;
		margin-top: 30px;
	}

	.tabs-price {
		border: 1px solid #3333;
		padding: 5px 12px 3px 12px;

	}

	.tabs {
		margin-left: 10px;
	}

	.tab-header {
		display: flex;
		width: 100%;
	}

	.area {
		width: 100%;
		background-color: white;
		padding-bottom: 28px;
		margin-top: 18px;
		padding-top: 14px;
	}

	.content {
		width: 96%;
		margin: 0 auto;
		height: 80vh;
		margin-top: 26px;
	}

	.header {
		background-color: white;
		padding: 17px 0 1px 12px;
		border-radius: 8px
	}

	.is-loading {
		animation: rotating 2s linear infinite;
	}

	@keyframes rotating {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}


	/* 基础响应式设置 */
	.content {
		width: 96%;
		margin: 0 auto;
		margin-top: 26px;
		padding-bottom: 20px;
	}

	/* 表格区域响应式 */
	.table-area {
		width: 100%;
		margin: 0 auto;
		margin-top: 20px;
		overflow-x: auto;
	}

	/* 分页容器 */
	.pagination-container {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		overflow-x: auto;
	}

	/* 对话框内容 */
	.diolog-content {
		padding: 10px;
	}

	/* 标签页区域 */
	.tabs-area {
		margin-top: 12px;
	}

	/* 配置区域 */
	.configurations {
		margin-top: 12px;
	}

	/* 对话框底部按钮 */
	.dialog-footer {
		margin: 20px auto 0;
		text-align: center;
	}

	/* 订单区域 */
	.order-area {
		width: 100%;
		padding: 12px;
		border: 1px solid #409eff;
		background-color: #e8f4ff;
		box-sizing: border-box;
	}

	/* 刷新按钮样式 */
	.shuaxin {
		font-size: 12px;
		color: #409eff;
		padding-right: 2px;
		cursor: pointer;
	}

	/* 加载动画 */
	.is-loading {
		animation: rotating 2s linear infinite;
	}

	@keyframes rotating {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 响应式调整 */
	@media (max-width: 768px) {

		/* 头部表单 */
		.header {
			padding: 10px;
		}

		/* 表单项目 */
		.el-form-item {
			width: 100%;
			margin-right: 0;
			margin-bottom: 10px;
		}

		/* 标签页 */
		.el-tabs {
			overflow-x: auto;
		}

		/* 对话框内容 */
		.diolog-content {
			padding: 5px;
		}

		/* 输入框宽度 */
		.el-input {
			width: 100% !important;
		}

		/* 表格操作按钮 */
		.el-table-column--fixed-right .el-button {
			margin-bottom: 5px;
		}

		/* 标签页头 */
		.tab-header {
			flex-direction: column;
		}

		.tabs {
			margin: 5px 0;
		}

		/* 对话框标题 */
		.el-dialog__title {
			font-size: 16px;
		}
	}

	/* PC端特定样式 */
	@media (min-width: 769px) {
		.content {
			/* max-width: 1200px; */
		}

		.table-area {
			width: 98%;
		}

		.diolog-content {
			min-width: 500px;
		}

		.el-form--inline .el-form-item {
			margin-right: 10px;
		}
	}
</style>